import { defineComponent } from 'vue';
import TiBar from '@common/tiBar';
import { ToThousandsTOOL } from '@/utils';
import Marquee from '@common/marquee';

export default defineComponent({
  name: 'compInfo',
  props: {
    data: Object,
  },
  render(props: any) {
    const {
      company_name, // 公司名称
      description, // 描述
      qualifications = [], // 企业资质 tags
      apno_cnt, // 专利数量
      capital, // 专利总价值
      city, // 城市
      seic_lv1, // 类型
      inno_rank, // 排名
      inno_score, // 创新评分
      inno_score_avg, // 同行平均分
      unit, // 货币单位
    } = props?.data ?? {};

    return (
      <div id="compInfo">
        <h1>{company_name || '-'}</h1>

        {/* 企业简介 */}
        <Marquee>{description}</Marquee>

        {/* 企业标签 */}
        <p class="tags">
          {qualifications?.map?.((t: any) => {
            return <div class="tag">{t}</div>;
          })}
        </p>

        {/* 专利信息 */}
        <p class="innoInfo">
          <img src={require('@assets/img_detail_zl.png')} width={80} height={80} />
          <aside>
            <header>专利量</header>
            <b>{ToThousandsTOOL(apno_cnt)}</b>
            <span>件</span>
          </aside>

          <aside>
            <header>实缴资本</header>
            <b>{ToThousandsTOOL(capital)}</b>
            <span>{unit}</span>
          </aside>
        </p>

        <p class="rankInfo">
          <img src={require('@assets/img_detail_rank.png')} width={80} height={80} />
          <aside>
            <header>
              {(city || '') + '-' + (seic_lv1 || '')} : 第{inno_rank || '-'}名
            </header>
            <p>
              <b>创新评分 </b>
              <TiBar
                color="linear-gradient(270deg, #00FFAD 0%, rgba(0, 255, 173, 0.3) 100%)"
                value={inno_score}
                width={450}
              />
            </p>
            <p>
              <b>同行平均 </b>
              <TiBar
                color="linear-gradient(270deg, #1890FF 0%, rgba(24, 144, 255, 0.3) 100%)"
                value={inno_score_avg}
                width={450}
              />
            </p>
          </aside>
        </p>

        <video
          src={require('@assets/lightBorder.mp4')}
          style={{
            mixBlendMode: 'screen',
          }}
          autoplay
          muted
          loop={true}
        ></video>
      </div>
    );
  },
});
